<!DOCTYPE html>
<!-- 网站主语言 -->
<html lang="zh-cn">

<head>
    <!-- 网站采用的字符编码 -->
    <meta charset="utf-8">
    <!-- 网站标题 -->
    <title>文章详情</title>
    {% load static %}
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <!--详情页面导入-->
    <script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'prism/prism.css' %}">
    <!--导入css-->
    <link rel="stylesheet" href="{% static 'common/common.css' %}">
    <link rel="stylesheet" href="{% static 'common/jquery.pagination.css' %}">
    <!-- 引入vuejs -->
    <script type="text/javascript" src="{% static 'js/vue-2.5.16.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/axios-0.18.0.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
</head>

<body>
<div id="app">
    <!-- 定义导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <!-- 导航栏商标 -->
            <div>
                <a class="navbar-brand" href="{% url 'home:index' %}">硕子鸽の博客</a>
            </div>
            <!-- 分类 -->
            <div class="collapse navbar-collapse">
                <div>
                    <ul class="nav navbar-nav">
                        {% for cat in categories %}
                            {% if category.id == cat.id %}
                                <li class="nav-item active">
                                    <a class="nav-link mr-2" href="/?cat_id={{ cat.id }}">{{ cat.title }}</a>
                                </li>
                            {% else %}
                                <li class="nav-item">
                                    <a class="nav-link mr-2" href="/?cat_id={{ cat.id }}">{{ cat.title }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        <!--登录/个人中心-->
        <div class="navbar-collapse">
            <ul class="nav navbar-nav">

                <!-- 如果用户已经登录，则显示用户名下拉框 -->
                <li class="nav-item dropdown" v-if="is_login">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                       @click="show_menu_click">[[ username ]]</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="display: block"
                         v-show="show_menu">
                        <a class="dropdown-item" href="{% url 'users:writeblog' %}">写文章</a>
                        <a class="dropdown-item" href='{% url "home:index" %}'>个人信息</a>
                        <a class="dropdown-item" href='{% url "users:logout" %}'>退出登录</a>
                    </div>
                </li>
                <li class="nav-item" v-else>
                    <a class="nav-link" href="{% url 'users:login' %}">登录</a>
                </li>

            </ul>
        </div>
    </nav>

    <!-- content -->
    <div class="container">
        <div class="row">
            <!--文章详情-->
            <div class="col-9">
                <!-- 标题及作者 -->
                <h1 class="mt-4 mb-4">{{ article.title }}</h1>
                <div class="alert alert-success">
                    <div>作者：<span>{{ article.author.username }}</span></div>
                    <div>浏览：{{ article.total_view }}</div>
                </div>
                <!-- 文章正文 -->
                <div class="col-12" style="word-break: break-all;word-wrap: break-word;">
                    {{ article.content | safe }}
                </div>
                <br>
                <!-- 发表评论 -->
                <hr>
                <br>
                <h5 class="row justify-content-center" v-show="!is_login">请<a href="{% url 'users:login' %}">登录</a>后回复
                </h5>
                <br>
                <div>
                    <form method="POST">
                        {% csrf_token %}
                        <input type="hidden" name="id" value="{{ article.id }}">
                        <div class="form-group"><label for="body"><strong>我也要发言：</strong></label>
                            <div>

                                <div class="django-ckeditor-widget" data-field-id="id_body"
                                     style="display: inline-block;">
                            <textarea cols="40" id="id_body" name="content" rows="10" required data-processed="0"
                                      :data-config="data_config" data-external-plugin-resources="[]" data-id="id_body"
                                      data-type="ckeditortype">

                            </textarea>
                                </div>
                            </div>
                        </div>
                        <!-- 提交按钮 -->
                        <button type="submit" class="btn btn-primary ">发送</button>
                    </form>
                </div>
                <br>
                <!-- 显示评论 -->
                <h4>共有{{ total_count }}条评论</h4>
                <div class="row">
                    {% for comment in comments %}
                        <div class="col-12">
                            <hr>
                            <p><strong style="color: pink"></strong></p>
                            <div>
                                <div><span><strong>{{ comment.user.username }}</strong></span>&nbsp;<span
                                        style="color: gray">{{ comment.created | date:'Y:m:d H:i:s' }}</span>
                                </div>
                                <br>
                                <p>{{ comment.content | safe }}</p>
                            </div>
                        </div>
                    {% endfor %}
                    <div class="pagination" style="text-align: center">
                        <div id="pagination" class="page"></div>
                    </div>
                </div>

            </div>
            <!-- 推荐 -->
            <div class="col-3 mt-4" id="sidebar" class="sidebar">
                <div class="sidebar__inner">
                    <h4><strong>推荐阅读</strong></h4>
                    <hr>
                    {% for hot_article in hot_articles %}
                        <a href="{% url 'home:detail' %}?id={{ hot_article.id }}"
                           style="color: black">{{ hot_article.title }}</a><br>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>


    <!-- Footer -->
    <footer class="py-3 bg-dark" id="footer">
        <div class="container">
            <h5 class="m-0 text-center text-white">Copyright @ <a href="https://blog.csdn.net/weixin_43941364">WangShuo</a></h5>
        </div>
    </footer>
</div>

<!--ckeditor-->
<script type="text/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}"
        data-ckeditor-basepath="{% static 'ckeditor/ckeditor/' %}" id="ckeditor-init-script"></script>
<script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
<!-- 引入js -->
<script type="text/javascript" src="{% static 'js/host.js' %}"></script>
<script type="text/javascript" src="{% static 'js/common.js' %}"></script>
<script type="text/javascript" src="{% static 'js/detail.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.pagination.min.js' %}"></script>
<script type="text/javascript">
    $(function () {
        $('#pagination').pagination({
            currentPage: {{ page_num }},
            totalPage: {{ total_page }},
            callback: function (current) {
                location.href = '/detail/?id={{ article.id }}&page_size={{ page_size }}&page_num=' + current;
            }
        })
    });
</script>
</body>

</html>